<template>
  <div class="header">
    <div class="signimg-box">
      <img :src="imgtx" class="weixin-headimgurl">
    </div>
    <p class="sign-heander-p">
      积分
      <span id="integral"></span>
    </p>
    <button @click="heandleClickSign" class="sign-btn">签到</button>
  </div>
</template>

<script>
export default {
  name: 'SignHeader',
  data () {
    return {
      imgtx: ''
    }
  },
  methods: {
    getInfo () {
      if (this.$store.state.userId) {
        // console.log(this.$store.state.userId)
        let code = JSON.parse(this.$store.state.token)
        this.imgtx = code.img
        // console.log(code.personalCode)
      }
    },
    heandleClickSign () {
      this.$emit('todayCalendar', true)
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
  .header
    height: 4.6rem
    width: 100%
    text-align: center
    color: #ffffff
    background-image: url(../../../../assets/img/signbg-icon.jpg)
    background-repeat: no-repeat
    background-size: 100% 100%
    overflow: hidden
    .signimg-box
      width: 1.6rem
      height: 1.6rem
      margin: .8rem auto .2rem auto
      border-radius: 50%
      background-color: rgba(255, 255, 255, 0.15)
      text-align: center
      .weixin-headimgurl
        width: 1.36rem
        height: 1.36rem
        border-radius: 50%
        background-color: rgba(255, 255, 255, 0.15)
        margin-top: .12rem
    .sign-heander-p
      font-size: .32rem
      width: 100%
      text-align: center
    .sign-btn
      width: 2.8rem
      height: .8rem
      line-height: .8rem
      text-align: center
      color: #fff
      border-radius: .8rem !important
      font-size: .5rem
      margin: .3rem auto 0 auto
      background-color: red
</style>
